<template>
  <div>
    <el-alert
      :title="'数据一共' + total + '条'"
      type="info"
      show-icon
      :closable="false"
    >
    </el-alert>
    <el-table :data="choiceList" :header-cell-style="{ background: '#fafafa' }">
      <el-table-column prop="number" label="试题编号" width="120">
      </el-table-column>
      <el-table-column prop="subject" label="学科" width="120">
      </el-table-column>
      <el-table-column prop="catalog" label="目录" width="120">
      </el-table-column>
      <el-table-column
        prop="questionType"
        label="题型"
        width="120"
        :formatter="formaQuestionType"
      >
      </el-table-column>
      <el-table-column label="题干" width="280">
        <template v-slot="{ row }">
          <div v-html="row.question"></div>
        </template>
      </el-table-column>
      <el-table-column label="录入时间" width="180">
        <template slot-scope="{ row }">
          {{ row.addDate | formatDate }}
        </template>
      </el-table-column>
      <el-table-column
        prop="difficulty"
        label="难度"
        width="80"
        :formatter="formatDifficulty"
      >
      </el-table-column>
      <el-table-column prop="creator" label="录入人" width="120">
      </el-table-column>
      <el-table-column
        prop="chkState"
        label="审核状态"
        width="120"
        :formatter="formatChkType"
      ></el-table-column>
      <el-table-column
        prop="chkRemarks"
        label="审核意见"
        width="150"
      ></el-table-column>
      <el-table-column
        prop="chkUser"
        label="审核人"
        width="120"
      ></el-table-column>
      <el-table-column
        prop="publishState"
        label="发布状态"
        width="150"
        :formatter="formatPublishType"
      ></el-table-column>
      <el-table-column fixed="right" label="操作" width="200" align="center">
        <template slot-scope="{ row }">
          <el-button size="small" type="text" @click="preview(row)"
            >预览</el-button
          >
          <el-button
            size="small"
            type="text"
            @click="check(row.id)"
            :disabled="row.chkState !== 0 ? true : false"
            >审核
          </el-button>
          <el-button
            size="small"
            type="text"
            >修改
          </el-button>
          <el-button size="small" type="text" @click="publish(row)">{{row.publishState ? '下架' : '上架'}}</el-button>
          <el-button size="small" type="text" @click="delQuestion(row.id)"
            >删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 试题预览弹框 -->
    <Preview
      :showPreviewDialog.sync="showPreviewDialog"
      :previewData="previewData"
      :types="previewData.questionType"
      :difficulty="previewData.difficulty"
      :options="checkList"
    ></Preview>
    <!-- 试题审核弹层 -->
    <Check :showCheckDialog.sync="showCheckDialog" :id="id"></Check>
  </div>
</template>

<script>
import {
  difficulty,
  questionType,
  chkType,
  publishType
} from '@/api/hmmm/constants'
import { detail, remove, choicePublish } from '@/api/hmmm/questions'
import Preview from '../components/questions-preview.vue'
import Check from '../components/questions-check.vue'
import eventBus from '@/EventBus/eventBus.js'
export default {
  components: {
    Preview,
    Check
  },
  props: {
    choiceList: {
      type: Array,
      default: () => []
    },
    total: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      showPreviewDialog: false, // 预览
      showCheckDialog: false, // 审核
      previewData: {},
      checkList: [],
      id: 0,
      text: '',
      publishState: 0
    }
  },
  methods: {
    // 格式化难度
    formatDifficulty(row, column, cellValue, index) {
      // console.log(difficulty)
      const obj = difficulty.find((item) => item.value === +cellValue)
      return obj ? obj.label : ''
    },
    // 格式化题型
    formaQuestionType(row, column, cellValue, index) {
      const obj = questionType.find((item) => item.value === +cellValue)
      // console.log(obj, 222)
      return obj ? obj.label : ''
    },
    // 格式化审核状态
    formatChkType(row, column, cellValue, index) {
      const obj = chkType.find((item) => item.value === +cellValue)
      // console.log(obj, 222)
      return obj ? obj.label : ''
    },
    formatPublishType(row, column, cellValue, index) {
      const obj = publishType.find((item) => item.value === +cellValue)
      // console.log(obj, 222)
      return obj ? obj.label : '待发布'
    },
    // 预览的方法
    async preview(row) {
      console.log(row, 321)
      const { data: res } = await detail(row)
      console.log(res)
      this.checkList = res.options.map((item) => item.isRight === 1)
      // console.log(this.checkList, 8)
      this.previewData = res
      this.showPreviewDialog = true
    },
    // 试题审核
    async check(id) {
      // console.log(id)
      this.id = id
      this.showCheckDialog = true
    },
    delQuestion(id) {
      this.$confirm('此操作将永久删除该试题, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove({ id })
        eventBus.$emit('updateCheckList')
        this.$message.success('删除题库成功')
      })
    },
    async publish(row) {
      if (row.publishState) {
        this.text = '下架'
        this.publishState = 0
      } else {
        this.text = '上架'
        this.publishState = 1
      }
      this.$confirm(`您确认${this.text}这道题目吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await choicePublish({ id: row.id, publishState: this.publishState })
        // 更新视图
        eventBus.$emit('updateArticleList')
        this.$message.success('删除文章成功')
      }).catch(() => {
        this.$message.warning(`取消${this.text}`)
      })
    }
  }
}
</script>

<style>
.el-alert {
  margin-bottom: 20px;
}
</style>
